<template>
  <div class="page-common-layout">
    <!--<div class="header">-->
    <!--<span class="title">{{$ct("menu","菜单")}}</span>-->
    <!--</div>-->
    <div class="padding-xs">
      <a-input-search style="width: 300px;" :placeholder="$ct('menuName','输入菜单名称')"  @search="onSearchMenu"/>
    </div>
    <div class="body">
      <a-tree
          :tree-data="searchTree"
          :replaceFields="{children:'children', title:'text', key:'id' }"
          :defaultExpandAll="true"
          v-if="showMenu"
          @select="selectTree"
      />
    </div>
  </div>
</template>

<script>
  export default {
    name: "menuPermission",
    data(){
      return {
        searchTree:[],
        menuId:'',
        queryParam:{},
        treeData:[],
        showMenu:false,
        masterUrl: {
          getMenu: '/system/menu/getTreeSysMenuData' //获取菜单数据
        },
        subTableLoading:false
      }
    },
    mounted() {
      //获取菜单
      this.getMenu();
    },
    methods:{
      //获取菜单数据
      getMenu() {
        this.$post(this.masterUrl.getMenu).then(res => {
          if (res.statusCode == 200) {
            this.treeData = JSON.parse(JSON.stringify(res.data))
            this.searchTree = JSON.parse(JSON.stringify(res.data))
            this.showMenu = true
          } else {
            this.$message.error(res.message, 1.5)
          }
        })
      },
      selectTree(value, node, extra) {
        this.subListKey = new Date().getTime()
        this.menuId = value[0]
        this.queryParam.menuId = this.menuId
        // this.refreshTable()
      },
      //菜单搜索
      onSearchMenu(value) {
        this.searchTree = this.treeFilter(value, JSON.parse(JSON.stringify(this.treeData)))
      },
      //树形数据过滤
      treeFilter(value, arr) {
        if (!arr) {
          return []
        }
        let newarr = [];
        arr.forEach(item => {
          if (item.text.indexOf(value) > -1) {
            let redata = this.treeFilter(value, item.children);
            let obj = {
              ...item,
              children: redata
            }
            newarr.push(obj);
          } else {
            if (item.children && item.children.length > 0) {
              let redata = this.treeFilter(value, item.children);
              let obj = {
                ...item,
                children: redata
              };
              if (redata && redata.length > 0) {
                newarr.push(obj);
              }
            }
          }
        });
        return newarr;
      },
      //获取table数据
      refreshTable() {}
    }
  }
</script>

<style scoped lang="less">
  .page-common-layout{
    display: flex;
    height: calc(100vh - 54px - 40px - 20px - 20px - 165px);
    flex-direction: column;
    overflow: scroll;
  }
  .page-common-left{

  }
</style>
